<template>
    <view class="payment-page">
        <view class="payment-container">
            <view class="page-title">订单确认</view>

            <view class="order-info-card">
                <view class="card-header">
                    <text class="header-title">订单信息</text>
                </view>

                <view class="order-details">
                    <view class="detail-item">
                        <text class="label">订单编号: </text>
                        <text class="value">{{ orderInfo.orderNo }}</text>
                    </view>

                    <view class="detail-item">
                        <text class="label">球桌: </text>
                        <text class="value">{{ orderInfo.productName }}</text>
                    </view>

                    <view class="detail-item">
                        <text class="label">预约日期: </text>
                        <text class="value">{{ orderInfo.date }} {{ orderInfo.week }}</text>
                    </view>

                    <view class="detail-item">
                        <text class="label">预约时间: </text>
                        <text class="value">{{ orderInfo.timeSlot }}</text>
                    </view>

                    <view class="detail-item">
                        <text class="label">时长: </text>
                        <text class="value">{{ orderInfo.duration }}小时</text>
                    </view>
                </view>
            </view>

            <view class="payment-info-card">
                <view class="card-header">
                    <text class="header-title">费用明细</text>
                </view>

                <view class="payment-details">
                    <view class="detail-item">
                        <text class="label">单价: </text>
                        <text class="value">¥{{ orderInfo.price }}/小时</text>
                    </view>

                    <view class="detail-item">
                        <text class="label">时长: </text>
                        <text class="value">{{ orderInfo.duration }}小时</text>
                    </view>

                    <view class="detail-item total-amount">
                        <text class="label">总计: </text>
                        <text class="value amount">¥{{ orderInfo.orderPayPrice }}</text>
                    </view>
                </view>
            </view>

            <view class="payment-method">
                <view class="method-title">支付方式</view>
                <view class="method-item active">
                    <view class="method-icon wechat-pay"></view>
                    <text class="method-name">微信支付</text>
                    <view class="method-selector">
                        <view class="selector-inner"></view>
                    </view>
                </view>
            </view>

            <view class="payment-button-container">
                <button class="payment-button" @click="handlePayment">
                    立即支付 ¥{{ orderInfo.orderPayPrice }}
                </button>
            </view>
        </view>

        <!-- 支付结果弹窗 -->
        <view class="payment-modal" v-if="showPaymentModal">
            <view class="modal-content">
                <view class="modal-icon" :class="paymentResult.status">
                    <text v-if="paymentResult.status === 'success'">✓</text>
                    <text v-else>✗</text>
                </view>

                <view class="modal-title">{{ paymentResult.title }}</view>
                <view class="modal-message">{{ paymentResult.message }}</view>
                <view class="modal-actions">
                    <button class="modal-button" @click="closePaymentModal">{{ paymentResult.buttonText }}</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import {
    ref,
} from 'vue';
import {
    onLoad
} from '@dcloudio/uni-app';
import {
    getOrderDetails,
    payOrder
} from '@/services/order.js';
import {
    formatDateTimeRange
} from '@/utils/date.js';

// 订单信息
const orderInfo = ref({});

// 支付结果模态框
const showPaymentModal = ref(false);
const paymentResult = ref({
    status: 'success', // success 或 fail
    title: '',
    message: '',
    buttonText: ''
});

// 页面加载时获取参数
onLoad(async (options) => {
    if (options.orderNo) {
        try {
            // 调用接口获取订单详情
            const res = await getOrderDetails(options.orderNo);
            if (res.code === 200) {
                orderInfo.value = res.data;
                const {
                    formattedDate,
                    formattedTimeSlot
                } = formatDateTimeRange(res.data.priceDateTimeRangeVOList);
                const datePart = formattedDate.split(' ')[0];
                const weekPart = formattedDate.split(' ')[1];

                Object.assign(orderInfo.value, {
                    date: datePart,
                    week: weekPart,
                    timeSlot: formattedTimeSlot,
                    duration: res.data.priceDateTimeRangeVOList.length,
                    price: res.data.priceDateTimeRangeVOList[0].price
                });
            } else {
                throw new Error(res.message || "获取订单详情失败");
            }
        } catch (error) {
            console.error('获取订单详情失败:', error);
            uni.showToast({
                title: "订单数据获取失败",
                icon: 'none'
            });
        }
    } else {
        uni.showToast({
            title: "缺少订单信息",
            icon: "none"
        });
    }
});

// 处理支付
const handlePayment = async () => {
    console.log('发起支付，订单号:', orderInfo.value.orderNo);

    const data = await payOrder(orderInfo.value.orderNo);
    console.log(data);

    if (data.code == 200) {
        // 支付成功
        paymentResult.value = {
            status: 'success',
            title: '支付成功',
            message: '您的订单已支付成功，可前往订单详情查看',
            buttonText: '查看订单'
        };
    } else {
        // 支付失败
        paymentResult.value = {
            status: 'fail',
            title: '支付失败',
            message: '支付未成功，请检查网络或更换支付方式后重试',
            buttonText: '重新支付'
        };
    }

    showPaymentModal.value = true;
};

// 关闭支付结果弹窗
const closePaymentModal = () => {
    showPaymentModal.value = false;
    if (paymentResult.value.status === 'success') {
        uni.reLaunch({
            url: `/pages/mine/orderDetail?orderNo=${orderInfo.value.orderNo}`
        });
    }
};
</script>

<style lang="scss">
.payment-page {
    min-height: 100vh;
    background: linear-gradient(110deg, rgba(172, 206, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);
    padding: 15px;

    .payment-container {
        .page-title {
            font-size: 20px;
            text-align: center;
            margin: 10px 0 20px;
            font-weight: 700;
            color: rgba(81, 89, 119, 1);
        }

        .order-info-card,
        .payment-info-card {
            background-color: #fff;
            border-radius: 10px;
            margin-bottom: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

            .card-header {
                padding: 15px;
                border-bottom: 1px solid #f5f5f5;

                .header-title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #333;
                }
            }

            .order-details,
            .payment-details {
                padding: 15px;

                .detail-item {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 12px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .label {
                        color: #666;
                        font-size: 14px;
                        min-width: 160rpx;
                    }

                    .value {
                        color: #333;
                        font-size: 14px;
                    }

                    &.total-amount {
                        margin-top: 10px;
                        padding-top: 15px;
                        border-top: 1px solid #f5f5f5;

                        .amount {
                            color: #ff6666;
                            font-size: 18px;
                            font-weight: bold;
                        }
                    }
                }
            }
        }

        .payment-method {
            background-color: #fff;
            border-radius: 10px;
            margin-bottom: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px;

            .method-title {
                font-size: 16px;
                font-weight: bold;
                color: #333;
                margin-bottom: 15px;
            }

            .method-item {
                display: flex;
                align-items: center;
                padding: 12px;
                border-radius: 8px;
                border: 1px solid #f5f5f5;

                &.active {
                    border-color: #1aad19;
                    background-color: #f5fff7;
                }

                .method-icon {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    margin-right: 10px;

                    &.wechat-pay {
                        background-color: #1aad19;
                        position: relative;

                        &::after {
                            content: '';
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            width: 14px;
                            height: 14px;
                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 4C5.36 4 2 6.69 2 10c0 1.89 1.08 3.56 2.78 4.66L4 17l2.5-1.5c.89.31 1.87.5 2.91.5.28 0 .55-.02.81-.05.03-.25.05-.52.05-.78v-.07c0-.44-.07-.86-.19-1.25.66-.7 1.13-1.61 1.13-2.65 0-2.21-2.02-4-4.5-4zm9 0C14.36 4 11 6.69 11 10s3.36 6 7.5 6c.45 0 .89-.04 1.32-.11.24.64.41 1.31.51 2.04-.72.14-1.48.22-2.27.22-4.14 0-7.5-2.69-7.5-6s3.36-6 7.5-6 7.5 2.69 7.5 6c0 1.43-.65 2.72-1.7 3.59-.31-.38-.68-.71-1.09-1 .82-.57 1.36-1.37 1.36-2.32 0-1.38-1.26-2.5-2.81-2.5-1.55 0-2.81 1.12-2.81 2.5 0 .37.1.72.27 1.03-.42.16-.8.38-1.15.64C10.9 11.23 10.5 10.14 10.5 9c0-2.21 2.02-4 4.5-4s4.5 1.79 4.5 4-2.02 4-4.5 4c-.28 0-.55-.03-.81-.08-.03.25-.05.52-.05.78v.07c0 .44.07.86.19 1.25.66.7 1.13 1.61 1.13 2.65 0 1.04-.47 1.95-1.13 2.65.12.39.19.81.19 1.25v.07c0 .26.02.53.05.78.26-.05.53-.08.81-.08 2.48 0 4.5-1.79 4.5-4s-2.02-4-4.5-4z'/%3E%3C/svg%3E");
                            background-size: contain;
                            background-repeat: no-repeat;
                            transform: translate(-50%, -50%);
                        }
                    }
                }

                .method-name {
                    flex: 1;
                    font-size: 14px;
                    color: #333;
                }

                .method-selector {
                    width: 20px;
                    height: 20px;
                    border: 1px solid #ccc;
                    border-radius: 50%;

                    .selector-inner {
                        width: 12px;
                        height: 12px;
                        background-color: #1aad19;
                        border-radius: 50%;
                        margin: 3px;
                        display: none;
                    }

                    &.active .selector-inner {
                        display: block;
                    }
                }
            }
        }

        .payment-button-container {
            padding: 20px 0 10px;

            .payment-button {
                width: 100%;
                background-color: #165dff;
                color: #fff;
                border: none;
                padding: 15px;
                font-size: 16px;
                border-radius: 8px;
                font-weight: bold;
            }
        }
    }

    .payment-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;

        .modal-content {
            background-color: #fff;
            border-radius: 10px;
            width: 80%;
            max-width: 300px;
            padding: 25px 20px;
            text-align: center;

            .modal-icon {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                margin: 0 auto 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                font-weight: bold;

                &.success {
                    background-color: #e8f5e8;
                    color: #1aad19;
                }

                &.fail {
                    background-color: #fae8e8;
                    color: #e33;
                }
            }

            .modal-title {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 10px;
                color: #333;
            }

            .modal-message {
                font-size: 14px;
                color: #666;
                margin-bottom: 20px;
                line-height: 1.5;
            }

            .modal-button {
                background-color: #165dff;
                color: #fff;
                border: none;
                padding: 10px 20px;
                font-size: 14px;
                border-radius: 6px;
                width: 100%;
            }
        }
    }
}
</style>